<template>
	<!-- 订单详情 -->
	<view class="orderDetails public">
		<view class="empty"></view>
		<view class="main">
			<!-- 上部分 -->
			<view class="header">
				<!-- 服务时长，本单收入 first -->
				<view class="title">
					<view class="title-left">
						<view class="">
							<text>60</text>分钟
						</view>
						<view class="">
							服务时长
						</view>
					</view>
					<view class="title-right">
						<view class="">
							<text>40.0</text>元
						</view>
						<view class="">
							本单收入
						</view>
					</view>
				</view>
				<!-- 服务时长，本单收入 end -->
				<!-- 地址 fitst -->
				<view class="address">
					<view class="addressOne" v-if="flag">
						<view class="move">
							搬
						</view>
						<view class="address-right">
							<view class="">
								信阳师范大学1号教学楼
							</view>
							<view class="">
								张先生<text>15445434543</text>
							</view>
						</view>
					</view>
					<view class="addressTwo" v-else>
						<view class="main-main">
							<view class="">
								<steps></steps>
							</view>
							<view class="main-right">
								<view class="main-right-business">
									<view class="main-right-header">
										信阳师范大学1食堂二楼201
									</view>
									<view class="main-right-footer">
										<view class="">
											商家<text>15445434543</text>
										</view>
									</view>
								</view>
								<view class="main-right-user" v-if="item.status !== 3">
									<view class="main-right-header">
										信阳师范大学1宿舍楼301
									</view>
									<view class="main-right-footer">
										张三<text>19887656765</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 地址 end -->
			</view>
			<!-- 下部分 -->
			<view class="footer">
				<view class="information-item">
					<view class="">
						订单编号
					</view>
					<view class="">
						<view class="">
							12736748959700
						</view>
						<view class="">
							复制
						</view>
					</view>
				</view>
				<!-- 下单人，订货人，取货人 -->
				<view class="information-item">
					<view class="">
						下单人
					</view>
					<view class="">
						<view class="">
							张（男士）
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="">
						收货人
					</view>
					<view class="">
						<view class="">
							张三（男士）
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="">
						留言
					</view>
					<view class="">
						<view class="">
							物品信息留言及图片
						</view>
						<view class="">
							<image src="https://photo.16pic.com/00/16/34/16pic_1634458_b.jpg" mode=""></image>
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="">
						下单时长
					</view>
					<view class="">
						<view class="">
							1小时
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="">
						收入明细
					</view>
					<view class="">
						<view class="">
							<view class="">
								基础费用<text>￥18.0</text>
							</view>
							<view class="">
								小费<text>￥2.0</text>
							</view>
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="">
						合计收入
					</view>
					<view class="">
						<view class="">
							￥40.0
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import steps from '../components/package/steps/steps.vue'
	export default {
		components: {
			steps
		},
		data(){
			return {
				flag: false
			}
		},
		onLoad() {
			
		}
	}
</script>

<style lang="less" scoped>
	.orderDetails {
		background: #F7F7F7;

		// 空
		.empty {
			height: 20rpx;
		}

		.main {
			width: 702rpx;
			height: 1074rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.14);
			border-radius: 20rpx;
			margin: auto;

			.header {
				width: 640rpx;
				border-bottom: 1px solid #F2F2F2;
				margin: auto;

				// 服务时长，本单收入
				.title {
					display: flex;
					justify-content: space-around;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #383838;
					padding: 81rpx 0 65rpx 0;

					.title-left {
						view:first-child {
							font-size: 30rpx;

							text {
								font-size: 48rpx;
								font-weight: 500;
								color: #F14500;
							}
						}
					}

					.title-right {
						view:first-child {
							font-size: 30rpx;

							text {
								font-size: 48rpx;
								font-weight: 500;
								color: #F14500;
							}
						}
					}
				}

				// 搬小圆球
				.move {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 38rpx;
					height: 38rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					border-radius: 50%;
					background: #F14500;
					margin-right: 15rpx;
				}

				// 地址
				.address {
					// 单地址
					.addressOne {
						display: flex;
						align-items: center;
						padding-bottom: 33rpx;
						.address-right {
							view:first-child {
								font-size: 26rpx;
								font-weight: 500;
								color: #3A3A3A;
							}
							view:last-child {
								font-size: 24rpx;
								font-weight: 400;
								color: #979797;
								text {
									padding-left: 20rpx;
								}
							}
						}
					}
					// 双地址
					.addressTwo {
						.main-main {
							display: flex;
							border-bottom: 1px solid #F2F2F2;
							padding-bottom: 23rpx;
						
							// 运
							.move {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 38rpx;
								height: 38rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								border-radius: 50%;
								background: #F14500;
								margin-right: 15rpx;
							}
						
							.main-right {
						
								// 商家地址，用户地址
								.main-right-header {
									font-size: 26rpx;
									font-weight: 500;
									color: #3A3A3A;
								}
						
								// 商家电话，用户电话
								.main-right-footer {
									height: 35rpx;
									font-size: 24rpx;
									font-weight: 400;
									color: #979797;
						
									text {
										padding-left: 20rpx;
									}
								}
						
								.main-right-user {
									padding-top: 38rpx;
								}
							}
						}
					}
				}			
			}
		}
	}
</style>